<script setup lang="ts">
import Tabs from '@/components/Tabs/index.vue'
import CenterTitle from '@/components/CenterTitle/index.vue'
import ItemShopkeeper from '@/components/ItemShopkeeper/index.vue'
import DialogMessage from '@/components/DialogMessage/index.vue'
import { useAuth } from '@/stores/index'
import APIShopkeeper from '@/api/shopkeeper'
import type { ShopkeeperType, ShopkeeperListResult } from '@/api/shopkeeper/types'
import { ElMessage } from 'element-plus'

const type = shallowRef<ShopkeeperType>('concern')

function onChange(item: any) {
    type.value = item.value
}

const { token, info } = storeToRefs(useAuth())
const { isNextOperation } = useAuth()

const queryParams = ref<PageQuery>({
    page: 1,
    limit: 8
})

const list = ref<ShopkeeperListResult[]>([])
const total = shallowRef<number>(0)

const loading = shallowRef<boolean>(false)
function getList() {
    if (token.value) {
        loading.value = true
        APIShopkeeper.getLoginShopkeeper(type.value, queryParams.value).then(({ total: count, data }) => {
            list.value = data
            total.value = count
        }).finally(() => {
            loading.value = false
        })
    } else {
        loading.value = true
        APIShopkeeper.getShopkeeper(type.value, queryParams.value).then(({ total: count, data }) => {
            list.value = data
            total.value = count
        }).finally(() => {
            loading.value = false
        })
    }
}

watch(type, () => {
    getList()
}, { immediate: true })


const shopInfo = ref<ShopkeeperListResult>()

const dialogVisible = shallowRef<boolean>(false)

function onShowDialogMessage(shopkeeper?: ShopkeeperListResult) {
    if (isNextOperation()) {
        if (info.value.id == shopkeeper?.user_id) return ElMessage.error('不可以与自己聊天')
        shopInfo.value = shopkeeper
        dialogVisible.value = true
    }
}

</script>

<template>
    <div class="shopkeeper">
        <CenterTitle title="店主" englishTitle="DIAN ZHU" />
        <!-- { label: '全部', value: 'all' } -->
        <Tabs :list="[{ label: '关注的店主', value: 'concern' }]" @onChange="onChange" />
        <div class="list" v-loading="loading">
            <el-empty description="暂无数据" v-if="list.length == 0" />
            <ItemShopkeeper v-for="item in list" :key="item.shop_id" :shopkeeper="item"
                @on-show-dialog-message="onShowDialogMessage" />
        </div>
        <DialogMessage v-model="dialogVisible" :shopInfo="shopInfo" />
    </div>
</template>

<style lang="scss" scoped>
.shopkeeper {
    box-sizing: border-box;
    width: 1340px;
    padding: 0 20px;
    margin: 0 auto;

    .list {
        margin-top: 30px;
    }
}
</style>